<template>
  <div class="bar-chart-cart" v-if="showInfo">
    <div class="row q-col-gutter-x-md dialog_form q-pa-md">
      <div id="echartsBar" style="width: 100%; height: 60vh"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import color from 'src/components/utils/color';

export default {
  components: {},
  props: {},
  data() {
    return {
      list: [],
      echartsList: [],
      xList: [],
      yList: [],
      showInfo: false,
    };
  },
  watch: {},
  computed: {},
  methods: {
    hide() {
      this.showInfo = false;
    },
    echartsInit() {
      const chartDom = document.getElementById('echartsBar');
      const myChart = echarts.init(chartDom);
      let option = {};
      option = {
        title: {
          right: '10px',
          bottom: '-5px',
          // subtext: this.barLineDate.label,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          left: '1%',
          right: '2.5%',
          top: '10%',
          bottom: '5%',
          containLabel: true,
        },
        xAxis: {
          show: true,
          type: 'category',
          boundaryGap: true,
          data: this.xList,
          axisTick: {
            show: true,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: 'black',
              fontSize: 14,
            },
          },
        },
        yAxis: {
          show: true,
          type: 'value',
          // min: this.minData - 2,
          // max: this.maxData + 2,
          // 不显示y轴的网格线
          // splitLine: {
          //   show: false
          // },
          axisLabel: {
            show: true,
            textStyle: {
              color: 'black',
            },
          },
        },
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '80%',
            // 获取
            data: this.yList,
            itemStyle: {
              color: '#5470C6',
            },
          },
        ],
      };

      if (option) {
        myChart.setOption(option);
      }
    },
    getechartsList() {
      this.list.forEach((item) => {
        let found = false;
        this.echartsList.forEach((item2, index) => {
          if (item.majorText === item2.name) {
            this.echartsList[index].value += 1;
            found = true;
          }
        });
        if (!found) {
          this.echartsList.push({
            name: item.majorText,
            value: 1,
          });
        }
      });
      this.echartsList.forEach((item) => {
        this.xList.push(item.name);
        this.yList.push(item.value);
      });
    },
    viewEcharts() {
      this.getechartsList();
      console.log(this.xList);
      this.$nextTick(() => {
        this.echartsInit();
      });
    },
    show(data) {
      this.showInfo = true;
      this.list = data;

      this.viewEcharts();
    },
  },
  created() {},
  mounted() {
    this.hide();
  },
};
</script>
<style lang="stylus"></style>
